<template>
  <el-card style="margin-bottom: 10px">
    <vxe-form :data="$attrs.formValue || {}" :rules="formRules" ref="vxeForm">
      <slot name="headButton"></slot>
      <search-from-index v-bind="$attrs" ref="item">
        <div>
          <slot name="item"></slot>
        </div>
      </search-from-index>
      <vxe-form-item v-if="searchBtns" :class="{'isLine': isLine}">
        <el-col>
          <vxe-button class="search-class" v-if="searchShow" status="primary" size="small" v-throttle="[search, `click`, 300]">{{searchText}}</vxe-button>
          <vxe-button v-if="resetShow" @click="reset" size="small">{{resetText}}</vxe-button>
          <vxe-button size="small" @click="exportBtn" v-if="isShowExport">导出数据</vxe-button>
          <vxe-button v-if="pShowMore && showMore" @click="openClose" size="small"><i :class="iconClass"></i></vxe-button>
        </el-col>
      </vxe-form-item>
    </vxe-form>
  </el-card>
</template>

<script>
  import searchFromIndex from './searchFromIndex.vue'
  export default {
    name: "searchComponent",
    components: {
      searchFromIndex
    },
    props: {
      searchShow: {
        type: Boolean,
        default: function () {
          return true
        }
      },
      pShowMore: {
        type: Boolean,
        default: function () {
          return true
        }
      },
      resetShow: {
        type: Boolean,
        default: function () {
          return true
        }
      },
      formRules: {
        type: Object,
        default: function () {
          return {}
        }
      },
      searchText: {
        type: String,
        default: function () {
          return '搜索'
        }
      },
      resetText: {
        type: String,
        default: function () {
          return '重置'
        }
      },
      searchBtns: {
        type: Boolean,
        default: function () {
          return true
        }
      },
      isLine: {
        type: Boolean,
        default: function () {
          return false
        }
      },
      isShowExport: {
        type: Boolean,
        default: () => {
          return false
        }
      }
    },
    data () {
      return {
      }
    },
    computed: {
      iconClass () {
        if (this.handlerShowMoreFun()) {
          return 'vxe-icon--arrow-bottom'
        } else {
          return 'vxe-icon--arrow-top'
        }
      },
      titleClass () {
        if (this.handlerShowMoreFun()) {
          return '展开'
        } else {
          return '收起'
        }
      },
      showMore () {
        let f = this.$attrs.colum.filter(it => {
          return it.hasOwnProperty('show')
        })
        // let showMoreFun = f.length > 0;
        return  f.length > 0;
      }
    },
    methods: {
      exportBtn () {
        this.$emit('exportBtn')
      },
      handlerShowMoreFun () {
        let f = this.$attrs.colum.filter(it => {
          return it.hasOwnProperty('show') && !it.show
        })
        // let showMoreFun = f.length > 0;
        return  f.length > 0;
      },
      // 查询
      search () {
        this.$emit('search')
      },
      // 重置
      reset () {
        this.$emit('reset')
      },
      openClose () {
        if (this.handlerShowMoreFun()) {
          this.$attrs.colum.forEach(it => {
            if (it.hasOwnProperty('show')) {
              it.show = true
            }
          })
        } else {
          this.$attrs.colum.forEach(it => {
            if (it.hasOwnProperty('show')) {
              it.show = false
            }
          })
        }
      }
    }
  }
</script>

<style scoped>
.isLine {
  width: 100%;
  text-align: center;
}
.search-class.vxe-button {
  background-color: #35405A !important;
  color: white !important;
}
.vxe-button {
  color: #35405A !important;
  border-radius: 0 !important;
  border-color: #35405A !important;
  box-shadow: none !important;
}
</style>
